<template>
  <div class="main">
  <el-row :gutter="20">
  <el-col :span="7">
    <div class="chart" id="chart1" style="height: 250px;"></div>
  </el-col>
  <el-col :span="7">
    <div class="chart" id="chart3" style="height: 240px;"></div>
  </el-col>
  <el-col :span="7">
    <div class="chart" id="chart5" style="height: 250px;"></div>
  </el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="14">
    <div class="chart" id="chart2" style="height: 350px;"></div>
  </el-col>
  <el-col :span="7">
    <!-- <div class="chart" id="chart4" style="height: 250px;"></div> -->
    <!-- <Chart4></Chart4> -->
    <component :is="bi"></component>
  </el-col>
</el-row>

  </div>
</template>

<script>
export default {
  components: { Chart4: () => import('../components/gridlayoutComponent/chart1.vue') },
  data () {
    return {
      bi: 'Chart4',
      pieChartData: [
        {
          value: 37,
          name: '清洁能源业务',
          itemStyle: {
            color: {
              // x2=1,y=0,柱子的颜色在水平方向渐变
              x2: 0,
              y2: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 1,
                  color: '#A8BCFF'
                },
                // 100%处的颜色
                {
                  offset: 0,
                  color: '#587FFF'
                }
              ]
            }
          }
        },
        {
          value: 35,
          name: '海外业务',
          itemStyle: {
            color: {
              // x2=1,y=0,柱子的颜色在水平方向渐变
              x2: 0,
              y2: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 1,
                  color: '#FDBD4A'
                },
                // 100%处的颜色
                {
                  offset: 0,
                  color: '#FFAE80'
                }
              ]
            }
          }
        },
        {
          value: 35,
          name: '海外业222务',
          itemStyle: {
            color: {
              // x2=1,y=0,柱子的颜色在水平方向渐变
              x2: 0,
              y2: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 1,
                  color: '#FDBD4A'
                },
                // 100%处的颜色
                {
                  offset: 0,
                  color: '#FFAE80'
                }
              ]
            }
          }
        },
        {
          value: 35,
          name: '海外业11务',
          itemStyle: {
            color: {
              // x2=1,y=0,柱子的颜色在水平方向渐变
              x2: 0,
              y2: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 1,
                  color: '#FDBD4A'
                },
                // 100%处的颜色
                {
                  offset: 0,
                  color: '#FFAE80'
                }
              ]
            }
          }
        },
        {
          value: 23,
          name: '境内油气业务',
          itemStyle: {
            color: {
              // x2=1,y=0,柱子的颜色在水平方向渐变
              x2: 0,
              y2: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 1,
                  color: '#4AE394'
                },
                // 100%处的颜色
                {
                  offset: 0,
                  color: '#3AD9C2'
                }
              ]
            }
          }
        }
      ]
    }
  },
  created () {
    console.log('11', this.$echarts)
  },
  mounted () {
    this.setChart1()
    this.setChart2()
    this.setChart3()
    this.setChart5()
  },
  methods: {
    setChart1 () {
      const chart1 = this.$echarts.init(document.getElementById('chart1'))
      chart1.setOption({
        grid: {
          top: '10%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#8181A5'
          }
        },
        legend: {
          show: false,
          data: [
            {
              name: '计划',
              icon: 'triangrectle'
            },
            {
              name: '实际',
              icon: 'rect'
            }
          ],
          top: '2%',
          right: '6%',
          itemHeight: 6,
          textStyle: {
            color: '#8181A5'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: ['已投标', '已中标', '未中标', '合同签订', '实施项目'],
            axisLabel: {
              // show: false,
              // formatter: '{value} ',
              color: '#8181A5'
            }
            // axisPointer: {
            //   type: 'shadow'
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '实际进度',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // show: false,
              formatter: '{value} ',
              color: '#8181A5'
            },
            splitLine: {
              // show: false,
              lineStyle: {
                color: '#EBEDF2'
              }
            }
          }
        ],
        series: [
          {
            name: '计划',
            type: 'bar',
            barMaxWidth: 16,
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              fontWeight: 500
            },
            data: [
              30, 20, 10, 20, 15
            ],
            itemStyle: {
              normal: {
                // barBorderRadius: [10, 10, 10, 10],
                color: {
                  type: 'linear',
                  // x2=1,y=0,柱子的颜色在水平方向渐变
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: '#587FFF'
                    },
                    {
                      offset: 0,
                      color: '#A8BCFF'
                    }
                  ]
                }
              }
            }
          }
        ]
      })
      window.addEventListener('resize', function () {
        chart1.resize()
      })
    },
    setChart2 () {
      const chart2 = this.$echarts.init(document.getElementById('chart2'))
      // const self = this
      window.addEventListener('resize', function () {
        chart2.resize()
      })
      chart2.setOption({
        grid: {
          top: '16%',
          left: '4%',
          right: '4%',
          bottom: '14%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#8181A5'
          }
        },
        legend: [
          {
            data: [
              {
                name: '计划周进度',
                icon: 'rect'
              },
              {
                name: '实际周进度',
                icon: 'rect'
              }
            ],
            top: '0%',
            right: '0%',
            itemHeight: 2,
            textStyle: {
              color: '#8181A5'
            }
          },
          {
            data: [
              {
                name: '计划累计进度',
                icon: 'rect'
              },
              {
                name: '实际累计进度',
                icon: 'rect'
              }
            ],
            top: '0%',
            right: '23.5%',
            itemHeight: 8,
            itemWidth: 8,
            textStyle: {
              color: '#8181A5'
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: [
              '20/09/10',
              '20/09/11',
              '20/09/12',
              '20/09/13',
              '20/09/14',
              '20/09/15',
              '20/09/16',
              '20/09/17',
              '20/09/18',
              '20/09/19',
              '20/09/20',
              '20/09/21',
              '20/09/22',
              '20/09/23',
              '20/09/24',
              '20/09/25',
              '20/09/26',
              '20/09/27',
              '20/09/28',
              '20/09/29',
              '20/09/30',
              '20/10/01',
              '20/10/02',
              '20/10/03',
              '20/10/04',
              '20/10/05',
              '20/10/06',
              '20/10/07',
              '20/10/08',
              '20/10/09',
              '20/10/10',
              '20/10/11',
              '20/10/12',
              '20/10/13'
            ],
            axisLabel: {
              // show: false,
              // formatter: '{value} ',
              color: '#8181A5'
            }
            // axisPointer: {
            //   type: 'shadow'
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '实际进度',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // show: false,
              formatter: '{value} ',
              color: '#8181A5'
            },
            splitLine: {
              // show: false,
              lineStyle: {
                color: '#EBEDF2'
              }
            }
          },
          {
            type: 'value',
            // name: '计划进度',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // show: false,
              formatter: '{value} ',
              color: '#8181A5'
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#EBEDF2'
              }
            }
          }
        ],
        dataZoom: [
          {
            show: true,
            type: 'slider',
            start: 0,
            end: 50,
            height: 8,
            left: '96%',
            right: '96%',
            bottom: '0%',
            textStyle: false
          }
        ],
        series: [
          {
            name: '计划累计进度',
            type: 'bar',
            barMaxWidth: 16,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              1, 2, 2, 3, 1, 2, 1, 1, 3, 1, 2, 1, 2, 5, 4, 3, 3, 3, 4, 2, 3, 2,
              3, 1, 4, 2, 1, 3, 2, 4, 1
            ],
            itemStyle: {
              normal: {
                // barBorderRadius: [10, 10, 10, 10],
                color: {
                  type: 'linear',
                  // x2=1,y=0,柱子的颜色在水平方向渐变
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    // 0%处的颜色
                    {
                      offset: 0,
                      color: '#FDBD4A'
                    },
                    // 100%处的颜色
                    {
                      offset: 1,
                      color: '#FFAE80'
                    }
                  ]
                }
              }
            }
          },
          {
            name: '实际累计进度',
            type: 'bar',
            barMaxWidth: 16,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              2, 3, 3, 2, 1, 1, 1, 4, 2, 3, 1, 4, 1, 3, 1, 3, 2, 3, 1, 2, 3, 1,
              2, 3, 2, 4, 1, 3, 2, 4, 2, 1, 3, 1
            ],
            itemStyle: {
              normal: {
                // barBorderRadius: [10, 10, 10, 10],
                color: {
                  type: 'linear',
                  // x2=1,y=0,柱子的颜色在水平方向渐变
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    // 0%处的颜色
                    {
                      offset: 0,
                      color: '#A8BCFF'
                    },
                    // 100%处的颜色
                    {
                      offset: 1,
                      color: '#587FFF'
                    }
                  ]
                }
              }
            }
          },
          {
            name: '计划周进度',
            type: 'line',
            symbol: 'circle',
            lineStyle: {
              color: '#4AE391',
              width: 2
            },
            itemStyle: {
              color: '#4AE391' // 改变节点颜色
            },
            areaStyle: {
              color: {
                type: 'linear',
                // x2=1,y=0,柱子的颜色在水平方向渐变
                x2: 0,
                y2: 1,
                colorStops: [
                  // 0%处的颜色
                  {
                    offset: 0,
                    color: 'rgba(74, 227, 145, 0.6)'
                  },
                  // 100%处的颜色
                  {
                    offset: 1,
                    color: 'rgba(74, 227, 145, 0)'
                  }
                ]
              }
            },
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C'
              }
            },
            data: [
              1, 3, 6, 7, 9, 10, 13, 16, 18, 20, 26, 27, 30, 31, 36, 39, 40, 45,
              48, 52, 55, 57, 60, 65, 69, 72, 76, 79, 81, 88, 89, 91, 93, 95,
              97, 99, 100
            ]
          },
          {
            name: '实际周进度',
            type: 'line',
            symbol: 'circle',
            lineStyle: {
              color: '#FF5C64',
              width: 2
            },
            itemStyle: {
              color: '#FF5C64' // 改变节点颜色
            },
            // markPoint:{
            //   itemStyle:{
            //     color: '#FF5C64',
            //   }
            // },
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C'
              }
            },
            data: [
              3, 6, 7, 9, 10, 16, 17, 20, 26, 27, 29, 32, 33, 36, 37, 38, 39,
              43, 46, 47, 49, 50, 56, 60, 63, 65, 69, 72, 75, 79, 82, 85, 87,
              89, 92, 96, 100
            ]
          },
          {
            name: '累计偏差',
            type: 'bar',
            barMaxWidth: 0.1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              2, 3, 3, 2, 1, 1, 1, 4, 2, 3, 1, 4, 1, 3, 1, 3, 2, 3, 1, 2, 3, 1,
              2, 3, 2, 4, 1, 3, 2, 4, 2, 1, 3, 1
            ],
            itemStyle: {
              normal: {
                // barBorderRadius: [10, 10, 10, 10],
                color: {
                  type: 'linear',
                  // x2=1,y=0,柱子的颜色在水平方向渐变
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    // 0%处的颜色
                    {
                      offset: 1,
                      color: 'rgba(255,255,255,0)'
                    },
                    // 100%处的颜色
                    {
                      offset: 0,
                      color: 'rgba(255,255,255,0)'
                    }
                  ]
                }
              }
            }
          }
        ]
      })
    },
    setChart3 () {
      const chart3 = this.$echarts.init(document.getElementById('chart3'))
      const yAxisData = [30, 20, 10, 20, 15, 20, 15]
      chart3.setOption({
        grid: {
          top: '10%',
          left: '0%',
          right: '0%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#8181A5'
          },
          formatter: (params) => {
            // console.log(params);
            return params[0].axisValue + ':' + params[0].data
          }
        },
        legend: {
          show: false,
          data: [
            {
              name: '未关闭项',
              icon: 'rect'
            },
            {
              name: '风险降级',
              icon: 'rect'
            }
          ],
          top: '2%',
          right: '0%',
          itemHeight: 10,
          itemWidth: 10,
          textStyle: {
            color: '#8181A5'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: ['渤海', '东海', '南海东部', '南海西部', '其它', '南海西部', '其它'],
            axisLabel: {
              // show: false,
              // formatter: '{value} ',
              color: '#8181A5'
            }
            // axisPointer: {
            //   type: 'shadow'
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '实际进度',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // show: false,
              formatter: '{value} ',
              color: '#8181A5'
            },
            splitLine: {
              // show: false,
              lineStyle: {
                color: '#EBEDF2'
              }
            }
          }
        ],
        dataZoom: [
          {
            show: true,
            type: 'slider',
            start: 0,
            end: 50,
            height: 10,
            left: '96%',
            right: '96%',
            bottom: -5,
            textStyle: false
          }
        ],
        series: [
          {
            name: '',
            type: 'bar', // 设置类型为象形柱状图
            barWidth: 30, // 柱图宽度
            itemStyle: {
              normal: {
                color: function (params) {
                  return {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#A8BCFF' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#587FFF' // 100% 处的颜色
                      }
                    ]
                  }
                },
                // color:'#39C9F6',
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (params) {
                    // 设置柱状图上文本的颜色不同
                    // 索引
                    // console.log(params.dataIndex);
                    if (params.dataIndex % 2 == 0) {
                      return '{a|' + yAxisData[params.dataIndex] + '}'
                    } else {
                      return '{b|' + yAxisData[params.dataIndex] + '}'
                    }
                  },
                  rich: {
                    a: {
                      // color: "#0EFCFF",
                      color: '#000'
                    },
                    b: {
                      // color: "#6947FF",
                      color: '#000'
                    }
                  }
                  // color:'#39C9F6'
                }
              }
            },
            z: 10,
            zlevel: 0,
            data: yAxisData
          },
          {
            type: 'pictorialBar', // 设置类型为象形柱状图
            symbol: 'rect', // 图形类型，带圆角的矩形
            symbolMargin: '2', // 图形垂直间隔
            symbolRepeat: true, // 图形是否重复
            // 分隔
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            symbolRepeat: 'fixed',
            symbolClip: true,
            symbolSize: [30, 4],
            symbolPosition: 'start',
            symbolOffset: [0, -1],
            // symbolBoundingData: this.total,
            width: '100%',
            z: 0,
            zlevel: 1,
            data: yAxisData
          }
        ]
      })
      window.addEventListener('resize', function () {
        chart3.resize()
      })
    },
    setChart5 () {
      this.chart5 = this.$echarts.init(document.getElementById('chart5'))
      window.onresize = this.chart5.resize
      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: '#fff',
          textStyle: {
            color: '#8181A5'
          }
        },
        legend: {
          show: true,
          orient: 'horizontal', // 垂直显示
          bottom: '6%',
          // right: 'center',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 23,
          // textStyle:{
          //   color: '#8181A5',
          //   fontSize: 14,
          // },
          formatter: (name) => {
            var index = 0
            this.pieChartData.forEach((d, i) => {
              if (d.name == name) {
                index = i
              }
            })
            return `{b|${name}}` + `{a|${this.pieChartData[index].value}}`
          },
          textStyle: {
            rich: {
              a: {
                color: '#000',
                fontSize: 14,
                fontWeight: 500
                // width: 95,
                // height: 21,
                // padding: [0,0,0,1]
              },
              b: {
                color: '#8181A5',
                fontSize: 14,
                fontWeight: 500,
                width: 120
              }
            }
          }
        },
        series: [
          {
            name: '不同等级风险数量分布',
            type: 'pie',
            center: ['50%', '40%'],
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              // borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 5
            },
            emphasis: {
              label: {
                show: true,
                formatter: (params) => {
                  // console.log(params);
                  return `{a|${params.data.name}}` + '\n' + `{b|${params.data.value}}`
                },
                rich: {
                  a: {
                    color: '#8181A5',
                    fontSize: 14,
                    fontWeight: 500,
                    lineHeight: 21
                  },
                  b: {
                    color: '#000000',
                    fontSize: 16,
                    fontWeight: 500,
                    lineHeight: 24
                  }
                }
                // fontSize: 40,
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieChartData
          }
        ]
      }
      this.chart5.clear() // 每次清空上一次
      clearInterval(this.timer) // 首次渲染清空计时器
      this.timer = null
      this.chart5.resize()
      this.chart5.setOption(option)
      this.chart5.on('mouseover', e => {
        clearInterval(this.timer)
        this.timer = null
        this.chart5.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.count
        })
        if (e.dataIndex === this.count) {
          this.chart5.dispatchAction({
            type: 'highlight', // 启动高亮
            seriesIndex: 0,
            dataIndex: this.count
          })
        }
      })
      // this.chart5.on('mouseout', e => {
      //   this.dysnTime(this.chart5, this.pieChartData)
      // })
    }

  }
}
</script>

<style lang="scss" scoped>
.el-row{
  margin: 20px 0px 0px !important;
  #chart1,#chart2,#chart3,#chart5{
    // border: 1px solid #ccc;
    background-color: #efeff4;
    padding: 10px;
    // border-radius: 10px;
  }
}

</style>
